Implements "pause on hover" Toast feature & exposes onMouseEnter and onMouseLeave callback props #6844
+47
−4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I understand you don't want feature PRs, however I did this before reading that so please consider this code change. This is not backwards breaking in any way and is simply a port of a feature that was added to PrimeReact two years ago. I used the commit from that project as a guide to make this change and took great care to ensure the change was clean, concise and matches the existing code style.
The issue that PR was accepted for was primefaces/primereact#3272
That being said, I didn't see any information in the README.md nor did I see a CONTRIBUTING.md file so I was not clear on how to set this up so I could test my code so be aware these changes have not been tested! The code change is, however, very simple and I see no reason why it would not work as intended. Either way, please do test and confirm before merging.
Description of changes:
onMouseEnter
andonMouseLeave
props toBaseToast
.ToastProps
interface inToast.d.ts
. As far as I can tell this should cause the API docs page to update to describe the new props (this was the only place in the codebase where text from other props' documentation page was present).ToastMessage.vue
so that when a toast with amessage.life
value set is created, the current timestamp is logged in the component.defaultPrevented
property is set on the event object.life-end
callback is terminated and a newlife-end
time is calculated (and stored to the component) by subtracting the current timestamp from the previously sentlife-end
time.life-end
timer is ran again.onMounted
lifecylce hook to a callable method to achieve this. The new method now uses the original life value at the start, but uses the calculated life time left each time it's started after being paused.Note:
All new timer start/stop programming is contingent on
message.life
being set, to ensure this change will not affect the behavior of "sticky" messages. This should support starting and stopping the timer on repeated mouse hovers without issue.Result:
If a message is created with a life of 10 seconds (for example) and the user moves the mouse over the message after 5 seconds the life-end timer is terminated. No matter how long the mouse stays over the component it will remain visible. Upon removing the mouse from the component the
life-end
timer will be restarted with the remaining 5 seconds.